<template>
  <div class="datail">
    <div class="banxin">
      <Bread></Bread>
      <div class="info flex">
        <div class="left">
          <!-- 组件 -->
          <Deatail v-if="productInfo.id" :data="productInfo"></Deatail>
        </div>
        <div class="rigth">
          <!-- 循环 -->
          <h4>你还可以兑换</h4>
          <ul>
            <li class="flex">
              <img src="../assets/images/home/integral-03.png" alt="" />
              <div class="dd">
                <p>{{ productInfo.name }}</p>
                <span
                  >{{ productInfo.coin
                  }}<img src="../assets/images/home/monad.png" alt=""
                /></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab banxin">
        <ul class="uls flex">
          <li :class="{ active: currentTab === 0 }" @click="currentTab = 0">
            商品详情
          </li>
          <li :class="{ active: currentTab === 1 }" @click="currentTab = 1">
            常见问题
          </li>
        </ul>
        <div
          class="info-detail"
          v-html="productInfo.description"
          v-show="currentTab === 0"
        ></div>
        <div class="faq" v-show="currentTab === 1">
          <h3>兑换后运费如何收取？</h3>
          <p>
            商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。
          </p>
          <p>
            （注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）
          </p>
          <h3>如何申请退换货？</h3>
          <p>
            所有产品均为鸡腿兑换礼品，无质量问题不支持退换货；<br />
            如因喜好不同，或到货后后悔等原因，不支持退货；<br />
            因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，叩丁狼均不进行补发或赔付；<br />
            如因质量问题需要退货，将由客服人员与客户联系，确认邮寄地址与流程。退回物品不得有人为损坏或使用痕迹，否则拒绝退换；<br />
            如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，叩丁狼将以鸡腿发放形式为用户报销运费，不接受单方面到付件。
          </p>
          <h3>如何开具发票？</h3>
          <p>
            叩丁狼积分商城产品均为定制礼品，使用积分兑换的产品均不支持开票。
          </p>
          <h3>关于鸡腿价格问题</h3>
          <p>
            因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺兑换。
          </p>
          <h3>联系我们</h3>
          <p>www.wolfcode.cn</p>
          <p class="foot">微信公众号搜索“叩丁狼”</p>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { GoodDetailApi } from "../http/api";
import Bread from "../components/common/Bread.vue";
import Deatail from "../components/Deatail.vue/Deatail.vue";
export default {
  components: {
    Bread,
    Deatail,
  },
  data() {
    return {
      currentTab: 0,
      nav: [],
      productInfo: {},
    };
  },
  created() {
    this.getDatail();
  },
  methods: {
    async getDatail() {
      if (!this.$route.query.id) return;
      const { data } = await GoodDetailApi(this.$route.query.id);
      this.productInfo = data.productInfo;
      //   只能使用正则进行替换
      const reg = /upload\//g;
      this.productInfo.description = this.productInfo.description.replace(
        reg,
        "https://sc.wolfcode.cn/upload/"
      );
    },
  },
  watch: {
    "$route.query": {
      handler() {
        this.getDatail();
      },
    },
  },
};
</script>
 
<style lang = "less" scoped>
.datail {
  /* background-color: #f5f5f5; */
  .banxin {
    .info {
      height: 710px;
      /* background-color: pink; */
      justify-content: space-between;

      .rigth {
        width: 230px;
        height: 100px;
        /* background-color: pink; */
        border-left: 1px solid #747070;
        ul {
          li {
            img {
              width: 80px;
              height: 60px;
            }
            .dd {
              padding-left: 10px;
              margin-top: 10px;
              p {
                font-size: 14px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                color: #0a328e;
                padding-bottom: 10px;
              }
              img {
                width: 20px;
                height: 20px;
              }
            }
          }
        }
      }
    }
    .tab {
      .uls {
        background-color: #fff;
        height: 50px;
        border-top: 2px solid #ccc;
        li {
          width: 120px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
          &.active {
            background: #ececec;
          }
        }
      }
      .faq {
        h3 {
          font-weight: 700;
          padding: 20px 0 15px 0;
        }
        p {
          line-height: 25px;
        }
        .foot {
          padding-bottom: 50px;
        }
      }
    }
  }
}
</style>